<template>
        <div>
            <div class="title">周末去哪儿</div>
            <ul>
                <li class="item border-bottom" v-for="item of list" ::key="item.id">
                    <div class="item-img-wrapper">
                            <img class="item-img" :src="item.imgUrl" alt="">
                    </div>
                    <div class="item-info">
                        <p class="item-title">{{item.title}}</p>
                        <p class="item-desc">{{item.desc}}</p>
                    </div>
                </li>
            </ul>
        </div>
    </template>

<script>
    export default {
        name: 'HomeWeekend',
        props: {
            list: Array
        },
        data() {
            return {

            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '~@/assets/style/varibles.scss';
    .title {
        line-height: .8rem;
        background-color: #eee;
        text-indent: .2rem;
    }
    
    .item-img-wrapper {
        height: 0;
        overflow: hidden;
        padding-bottom: 37.09%;
    }
    
    .item-img {
        width: 100%;
    }
    
    .item-info {
        flex: 1;
        padding: .1rem;
        min-width: 0;
        .item-title {
            line-height: .54rem;
            font-size: .32rem;
            @include ellipsis;
        }
        .item-desc {
            line-height: .5rem;
            font-size: .28rem;
            color: #ccc;
            @include ellipsis;
        }
    }
</style>